<template>
	<div class="statistical-actual-container">
		<el-card shadow="hover" body-style="padding:8px; ">
			<el-tabs v-model="activeName" @tab-click="handleClick" activeName="first">
				<el-tab-pane label="物品状态统计" name="first"><Status v-if="activeName == 'first'" /></el-tab-pane>
				<el-tab-pane label="物品类别统计" name="second"><Type v-if="activeName == 'second'" /></el-tab-pane>
				<el-tab-pane label="物品来源统计" name="third"><Source v-if="activeName == 'third1'" /></el-tab-pane>
				<el-tab-pane label="物品提取部位统计" name="four"><Position v-if="activeName == 'four1'" /></el-tab-pane>
				<el-tab-pane label="物品提取方式统计" name="five"><Method v-if="activeName == 'five'" /></el-tab-pane>
				<el-tab-pane label="物品库房统计" name="six"><Store v-if="activeName == 'six'" /></el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive } from 'vue';
import Status from './component/status.vue';
import Type from './component/type.vue';
import Source from './component/source.vue';
import Position from './component/position.vue';
import Method from './component/method.vue';
import Store from './component/store.vue';

export default {
	name: 'statisticalActual',
	components: { Status, Type, Source, Position, Method, Store },
	setup() {
		const state = reactive({
			activeName: 'first',
		});

		return {
			...toRefs(state),
		};
	},
};
</script>
